<template>
  <div class="login_box">
    <div class="background"></div>
    <div class="dol">
      <a-tooltip placement="bottom">
        <template #title>
          <span>下载桌面端</span>
        </template>
        <a-button type="link" @click="linkCliick">
          <windows-outlined />
        </a-button>
      </a-tooltip>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { WindowsOutlined } from "@ant-design/icons-vue/lib/icons";

const linkCliick = () => {
  window.open("http://101.43.97.15:3000/public/my_chat.rar", "_self");
};
</script>
<style lang="scss">
.login_box {
  height: 100vh;
  width: 100vw;
  .background {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-size: cover;
    background-color: black;
    overflow: hidden;
    background-image: url(../accets/images/002726-1690043246d389.jpg);
    filter: blur(10px);
  }
  .dol {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 11;
    span {
      font-size: 20px;
    }
  }
  .drop-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.context_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
.ant-form {
  width: 400px;
  min-height: 300px;
  padding: 30px 40px;
  background-color: rgba($color: #ffffff, $alpha: 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login_button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.ant-btn {
  margin-left: 30px;
}
</style>
